<template>
  <view class="index_container">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>

    <view class="benefits_index">
      <view
        :class="currentTab === 0 ? 'active' : 'initTab'"
        @click="currentTab = 0"
        >VIP</view
      >
      <view
        :class="currentTab === 1 ? 'active' : 'initTab'"
        @click="currentTab = 1"
        class="active"
        >VIP2</view
      >
    </view>

    <view class="benefits_desc">會員享受權益</view>

    <!-- 折扣 -->
    <view class="benefits_discount">享受會員價8.8折 </view>

    <!-- 開通條件 -->
    <view class="benefits_condition">開通會員條件</view>

    <!-- 條件列表 -->
    <view class="benefits_condition_list">
      <view class="benefits_condition_list_item">
        <view class="benefits_condition_list_item_icon">
          <img :src="'./static/demo/dui.png'" alt="" />
        </view>
        <view class="benefits_condition_list_item_desc">
          消費滿1000元即可升級
        </view>
      </view>

      <view class="benefits_condition_list_item">
        <view class="benefits_condition_list_item_icon">
          <img :src="'./static/demo/dui.png'" alt="" />
        </view>
        <view class="benefits_condition_list_item_desc">
          消費滿1000元即可升級
        </view>
      </view>

      <view class="benefits_condition_list_item">
        <view class="benefits_condition_list_item_icon_disable">
          <img :src="'./static/demo/dui.png'" alt="" />
        </view>
        <view class="benefits_condition_list_item_desc_disable">
          消費滿1000元即可升級
        </view>
      </view>
    </view>

    <!-- 按鈕 -->
    <view class="benefits_button"> 滿足開通會員條件 </view>

    <!-- <view class="benefits_button_disable"> 滿足開通會員條件 </view> -->
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import base from "@/config/baseUrl";
import fNavbar from "@/components/module/f-navbar/f-navbar";
import fTabbar from "@/components/module/f-tabbar/f-tabbar";

export default {
  components: {
    fNavbar,
    fTabbar,
  },
  computed: {
    ...mapState(["PrimaryColor", "userInfo"]),
    freeSpecsButtonBackground() {
      return this.$u.colorToRgba(this.$u.rgbToHex(this.PrimaryColor), 0.75);
    },
  },
  data() {
    return {
      baseUrl: base.baseUrl,
      systemInfo: base.systemInfo,

      //   當前選中的tab
      currentTab: 0,
    };
  },
  onLoad() {
    // 隐藏原生的tabbar
    uni.hideTabBar();
  },
  methods: {
    ...mapMutations(["setLoginPopupShow"]),
  },
  onPageScroll(e) {},
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  background-color: rgba(243, 243, 243, 1);
}

.index_container {
  padding-left: 26.163rpx;
  padding-right: 26.163rpx;

  padding-top: 26.163rpx;
}

.benefits_index {
  width: 695.93rpx;
  height: 111.628rpx;
  background: rgba(255, 255, 255, 1);
  border: 0.3px solid rgba(74, 74, 74, 1);

  padding: 10.465rpx;
  border-radius: 10.465rpx;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

// 激活狀態
.active {
  width: 329.651rpx;
  height: 90.698rpx;
  border-radius: 22.674rpx;
  background: rgba(36, 118, 173, 1);

  font-family: "Microsoft Sans Serif";
  font-size: 41.86rpx;
  font-weight: 400;
  text-align: center;
  color: rgba(255, 255, 255, 1);

  display: flex;
  align-items: center;
  justify-content: center;
}

.initTab {
  width: 329.651rpx;
  height: 90.698rpx;
  background: rgba(255, 255, 255, 1);

  color: rgba(30, 30, 30, 1);
  font-family: "Microsoft Sans Serif";
  font-size: 41.86rpx;
  font-weight: 400;
  text-align: center;

  display: flex;
  align-items: center;
  justify-content: center;
}

.benefits_desc {
  margin-top: 48.837rpx;
  font-family: "Microsoft Yi Baiti";
  font-size: 34.884rpx;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}

.benefits_discount {
  margin-top: 48.837rpx;
  font-family: "Microsoft Yi Baiti";
  font-size: 34.884rpx;
  font-weight: 400;
  color: rgba(247, 174, 115, 1);
  margin-left: 30rpx;
}

.benefits_condition {
  margin-top: 87.209rpx;
  font-family: "Microsoft JhengHei";
  font-size: 34.884rpx;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}

.benefits_condition_list {
  margin-top: 48.837rpx;
}

.benefits_condition_list_item {
  display: flex;
  align-items: center;
  margin-left: 30rpx;

  margin-top: 24.419rpx;
}

.benefits_condition_list_item_icon {
  width: 38.372rpx;
  height: 38.372rpx;
  background: rgba(0, 0, 0, 1);
  border-radius: 19.186rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 22.674rpx;
    height: 15.698rpx;
  }
}

// 禁用
.benefits_condition_list_item_icon_disable {
  width: 38.372rpx;
  height: 38.372rpx;
  background: rgba(123, 123, 123, 1);
  border-radius: 19.186rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 22.674rpx;
    height: 15.698rpx;
  }
}
.benefits_condition_list_item_desc_disable {
    font-family: "Microsoft JhengHei";
  font-size: 34.884rpx;
  font-weight: 400;
  color: rgba(123, 123, 123, 1);

  margin-left: 12rpx;
}
.benefits_condition_list_item_desc {
  font-family: "Microsoft JhengHei";
  font-size: 34.884rpx;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);

  margin-left: 12rpx;
}

.benefits_button {
  margin-top: 87.209rpx;
  width: 561.628rpx;
  height: 92.442rpx;
  border-radius: 22.674rpx;

  font-family: "Microsoft Yi Baiti";
  font-size: 34.884rpx;
  font-weight: 400;
  text-align: center;

  background: rgba(0, 0, 0, 1);
  color: rgba(255, 255, 255, 1);
  display: flex;
  align-items: center;
  justify-content: center;

  margin-left: 68.023rpx;
}

.benefits_button_disable {
  margin-top: 87.209rpx;
  width: 561.628rpx;
  height: 92.442rpx;
  border-radius: 22.674rpx;

  font-family: "Microsoft Yi Baiti";
  font-size: 34.884rpx;
  font-weight: 400;
  text-align: center;

  background: rgba(123, 123, 123, 1);
  color: rgba(255, 255, 255, 1);
  display: flex;
  align-items: center;
  justify-content: center;

  margin-left: 68.023rpx;
}
</style>
